
<template>
	<div class="index">

		<div class="team">

			<div class="powercon">
				<div class="powerbtn">
					<el-button type="primary" plain round style="margin-right: 20px;" @click="newpersonlog = true">新建员工</el-button>
					<el-select v-model="department" @change="changepost" placeholder="更换岗位至">
						<el-option v-for="item in postlistall" :label="item.name" :key="item.id" :value="item.id"></el-option>
					</el-select>
				</div>
				<div class="powersearch">
					<el-input placeholder="请输入姓名" v-model="teamname" class="input-with-select">
						<el-button @click="searchname" slot="append"  icon="el-icon-search"></el-button>
					</el-input>
				</div>
			</div>
			<div class="powertable"  v-loading="loading">
				<div class="powerlist">
					<div class="powerth th1"><input type="checkbox" @change="quanxuan" value="0" v-model="quanxuana"></div>
					<div class="powerth">账户名</div>
					<div class="powerth">员工姓名</div>
					<div class="powerth">部门</div>
					<div class="powerth">岗位</div>
          <div class="powerth" v-if="mingwen">允许解密</div>
					<div class="powerth">使用状态</div>
					<div class="powerth th2">操作</div>
				</div>

				<div class="powerlist" v-for="item in list"  :key="item.id">

					<div class="powertd th1" v-if="item.status != '隐刀'"><input type="checkbox" :value="item.id" @change="danxuan" v-model="danxuans"></div>
					<div class="powertd" v-if="item.status != '隐刀'">{{item.name}}</div>
					<div class="powertd" v-if="item.status != '隐刀'">{{item.real_name}}</div>
					<div class="powertd" v-if="item.status != '隐刀'">{{item.dept}}</div>
					<div class="powertd" v-if="item.status != '隐刀'">{{item.job}}</div>
          <div class="powertd" v-if="item.status != '隐刀' && mingwen">
            <el-switch v-model="item.is_decrypt" active-color="rgb(8, 201, 160)" inactive-color="rgb(220, 220, 220)" :active-value='1' :inactive-value='0' @change="changed(item)"></el-switch>
          </div>
					<div class="powertd" v-if="item.status != '隐刀'">{{item.status}}</div>

					<div class="powertd th2" v-if="item.status != '隐刀'">
						<el-button  type="text" style="color: #2974FF;" @click="delet(item.id,item.real_name)">删除</el-button>

						<el-button  v-if="item.status == '停用'" type="text" @click="start(item.id,item.real_name)">启用</el-button>

						<el-button  v-if="item.status == '在用'" type="text" @click="stop(item.id,item.real_name)">停用</el-button>


						<el-button  type="text" @click="fix(item.id)">更改信息</el-button>
					</div>

				</div>
				<div class="fenye">
					<el-pagination background layout="total,prev, pager, next" @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>

			<el-dialog title="新建员工账户" center class="log" :visible.sync="newpersonlog" width="510px" :close-on-click-modal="false">
				<el-form ref="form" @submit.native.prevent :model="newperson" label-width="120px">
					  <!-- <el-form-item label="账户名" class="w150">
						    <el-input v-model="newperson.name">
								<template slot="prepend">{{shopname}}</template>
							</el-input>
					  </el-form-item> -->
		        <el-form-item label="账户名">
		            <el-input v-model="newperson.name"></el-input>
		        </el-form-item>
					  <el-form-item label="密码">
					  		<el-input v-model="newperson.pass"></el-input>
					  </el-form-item>
					  <el-form-item label="使用者">
					  		<el-input v-model="newperson.user"></el-input>
					  </el-form-item>
					  <el-form-item label="选择部门">
						<el-select v-model="newperson.department" @change="choosedepartmentid" placeholder="请选择部门">
						  <el-option v-for="item in departmentlist" :label="item.name" :value="item.id"  :key="item.id"></el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item label="选择岗位">
							<el-select v-model="newperson.post" placeholder="请选择岗位">
							  <el-option v-for="item in postlist" :label="item.name" :key="item.id" :value="item.id"></el-option>
							</el-select>
					  </el-form-item>
				</el-form>
			  <span slot="footer" class="dialog-footer">
				<el-button  round type="info" @click="newpersonlog = false">取 消</el-button>
				<el-button  round type="danger" @click="newpersongo">确 定</el-button>
			  </span>
			</el-dialog>

			<el-dialog title="修改员工信息" center class="log" :visible.sync="fixpersonlog" width="510px" :close-on-click-modal="false">
				<el-form ref="form" @submit.native.prevent :model="fixperson" label-width="120px">
					<el-form-item label="新账户">
					  	<el-input v-model="fixperson.name"></el-input>
					</el-form-item>
					<el-form-item label="新密码">
					  	<el-input v-model="fixperson.pass"></el-input>
					</el-form-item>
				</el-form>
			  <span slot="footer" class="dialog-footer">
				<el-button  round type="info" @click="fixpersonlog = false">取 消</el-button>
				<el-button  round type="danger" @click="fixpersongo">确 定</el-button>
			  </span>
			</el-dialog>

		</div>
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "wodetuandui",
		data(){
			return {
				department:"",
				teamname:"",

				danxuans:[],
				quanxuana:false,
				quanxuans:[],

				loading:true,

				total:0,
				page:1,
				page_size:20,


				newpersonlog:false,
				newperson:{
					name:"",
					pass:"",
					user:"",
					post:"",
					department:""
				},
				fixpersonlog:false,
				fixperson:{
					id:"",
					name:"",
					pass:""
				},

				list:[],
				departmentlist:[],
				postlist:[],
				postlistall:[],
				departmentid:"",
				memid:"",

        mingwen:false
			}
		},
		created() {
			this.getlist()
			this.getdepartment()

			//获取全部岗位 更换岗位使用
			axios.get('/api/plan-market/permission/list?level=3&page=1&page_size=100')
				.then(response => {
					if(response.data.msg.code == 0){
						this.postlistall = response.data.data.data
					}else{
						this.$message.error(response.data.msg.info);
					}
				})

			this.shopname = JSON.parse(localStorage.getItem('SHOP')).shop_name+ "_"

			var shop = JSON.parse(localStorage.getItem('USER'));
			this.memid = shop.id


      let id = JSON.parse(localStorage.getItem('SHOP')).shop_id
      this.mingwen = true

		},
		mounted(){

		},
		methods: {
      changed:function(item){
        this.loading = true
        axios.post('/api/plan-market/staff-set',{user_id:item.id,is_decrypt:item.is_decrypt})
          .then(response => {
        		if(response.data.msg.code == 0){

        			this.getlist()
              this.loading = false
        		}else{

              if(item.is_decrypt == 0){
                item.is_decrypt = 1
              }
              if(item.is_decrypt == 1){
                item.is_decrypt = 0
              }

        			this.$message.error(response.data.msg.info);
              this.loading = false
        		}
          })
      },
			//更换岗位
			changepost:function(val){
				var params = {
					permission_id:val,
					ids:this.danxuans
				}
				axios.post('/api/plan-market/user/change', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.loading = true
							this.$message({
								type: 'success',
								message: '已更改岗位!'
							});
							this.getlist()
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//全选的ids集合
			ids:function(){
				var checkids = []
				for(var i in this.list){
					checkids.push(this.list[i].id)
				}
				this.quanxuans = checkids
			},
			//翻页
			fanye:function(val){
				this.page = val
				this.loading = true
				this.getlist()
			},
			//获取列表
			getlist:function(){
				axios.get('/api/plan-market/user/list?page='+this.page+'&page_size='+this.page_size+'&real_name='+this.teamname)
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data.data
							this.loading = false
							this.total = response.data.data.total
							//全选使用
							this.ids()
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取部门
			getdepartment:function(){
				axios.get('/api/plan-market/permission/list?level=2')
					.then(response => {
						if(response.data.msg.code == 0){
							this.departmentlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//选择部门
			choosedepartmentid:function(){
				this.getpost()
			},
			//获取岗位
			getpost:function(){
				axios.get('/api/plan-market/permission/list?level=3&parent_id='+this.newperson.department)
					.then(response => {
						if(response.data.msg.code == 0){
							this.postlist = response.data.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//启用账户
			start:function(id,name){
				this.$confirm('此操作将把员工姓名为"'+name+'"的账号启用, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					params.append('status',0);
					axios.post('/api/plan-market/user/status', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								 this.$message({
									type: 'success',
									message: '已停用!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//删除账户
			delet:function(id,name){
				this.$confirm('此操作将把员工姓名为"'+name+'"的账号删除, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					params.append('status',-1);
					axios.post('/api/plan-market/user/status', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								 this.$message({
									type: 'success',
									message: '已删除!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//停用账号
			stop:function(id,name){
				this.$confirm('此操作将把员工姓名为"'+name+'"的账号停止使用, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					var params = new URLSearchParams();
					params.append('id',id);
					params.append('status',10);
					axios.post('/api/plan-market/user/status', params)
					  .then(response => {
							if(response.data.msg.code == 0){
								this.loading = true
								 this.$message({
									type: 'success',
									message: '已停用!'
								});
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
					  })
				})
			},
			//修改账户密码
			fixpersongo:function(){
				var params = new URLSearchParams();
				params.append('id',this.fixperson.id);
				params.append('password',this.fixperson.pass);
				params.append('name',this.fixperson.name);
				var that = this
				if(this.fixperson.pass != '' && this.fixperson.name == ''){

					axios.post('/api/plan-market/name/reset', params)
						.then(response => {
								if(response.data.msg.code == 0){
									that.fixpersonlog = false
									that.fixperson.pass = ""
									that.fixperson.name = ""
									that.getlist()
									that.$message({
										type: 'success',
										message: '修改信息成功!'
									});
								}else{
									this.$message.error(response.data.msg.info);
								}
						})
				}
				if(this.fixperson.name != '' && this.fixperson.pass == ''){
					axios.post('/api/plan-market/name/reset', params)
						.then(response => {
								if(response.data.msg.code == 0){
									that.fixpersonlog = false
									that.fixperson.pass = ""
									that.fixperson.name = ""
									that.getlist()
									that.$message({
										type: 'success',
										message: '修改信息成功!'
									});
								}else{
									that.$message.error(response.data.msg.info);
								}
						})
				}
				if(this.fixperson.name != '' && this.fixperson.pass != ''){
					axios.post('/api/plan-market/name/reset', params)
						.then(response => {
								if(response.data.msg.code == 0){
                  if(response.data.msg.code == 0){
                  	that.fixpersonlog = false
                  	that.fixperson.pass = ""
                  	that.fixperson.name = ""
                  	that.getlist()
                  	that.$message({
                  		type: 'success',
                  		message: '修改信息成功!'
                  	});
                  }else{
                  	that.$message.error(response.data.msg.info);
                  }
									// axios.post('/api/plan-market/name/reset', params)
									// 	.then(response => {
									// 			if(response.data.msg.code == 0){
									// 				that.fixpersonlog = false
									// 				that.fixperson.pass = ""
									// 				that.fixperson.name = ""
									// 				that.getlist()
									// 				that.$message({
									// 					type: 'success',
									// 					message: '修改信息成功!'
									// 				});
									// 			}else{
									// 				that.$message.error(response.data.msg.info);
									// 			}
									// 	})
								}else{
									this.$message.error(response.data.msg.info);
								}
						})
				}
			},

			//修改密码并保存id
			fix:function(id){
				this.fixperson.id = id
				this.fixpersonlog = true
			},
			//新建员工
			newpersongo:function(){
				var that = this
				var params = new URLSearchParams();
                if(this.newperson.name == ""){this.$message.error("账户名不能为空"); return false}
                if(this.newperson.user == ""){this.$message.error("使用者不能为空"); return false}
                if(this.newperson.post == ""){this.$message.error("请选择岗位"); return false}
				// params.append('name',this.shopname+this.newperson.name);
        params.append('name',this.newperson.name);
				params.append('real_name',this.newperson.user);
				params.append('password',this.newperson.pass);
				params.append('permission_id',this.newperson.post);
				axios.post('/api/plan-market/user/add', params)
				  .then(response => {
						if(response.data.msg.code == 0){
							this.newpersonlog = false
							this.loading = true
							this.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
				  })
			},
			//搜索内容
			searchname:function(){
				this.getlist()
			},

			//点击全选
			quanxuan:function() {

				if(this.danxuans.length != this.quanxuans.length || this.danxuans.length == 0){
					this.danxuans = this.quanxuans
					this.quanxuana = true
				}else{
					this.danxuans = []
					this.quanxuana = false
				}
				console.log(this.danxuans)
			},
			//点击单选
			danxuan:function() {
				console.log(this.danxuans)
				// this.choosearea.push(this.checkedarea)
				if(this.danxuans.length == this.quanxuans.length){
					this.quanxuana = true
				}else{
					this.quanxuana = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{
        background: #fff;

        /deep/ .el-button--danger {
             color: #FFF;
             background-color: #2974FF;
             border-color: #2974FF;
         }

        .powertop {
          display: flex;
          background:#f9f9f9;
        }

        .powertopli {
          flex-basis: 180px;
          line-height: 50px;
          border-bottom: 3px #F9F9F9 solid;
          color: #727272;
          border-right: 1px #F9F9F9 solid;
          font-size: 16px;
          text-align: center;
        }

        .powertopact {
          background: #FFFFFF;
          border-bottom: 3px #2974FF solid;
        }
        .powercon{ background: #FFFFFF; padding: 20px 40px; justify-content: space-between; display: flex;}
        .powerbtn{ flex-basis: 320px; display: flex;}
        .powersearch{ flex-basis: 250px;}

        .list {
        	text-align: center; padding: 0 20px;
        	line-height: 60px;

        	.th {
        		flex: 1;
        		background: rgb(246, 246, 246);
            color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;
        	}

        	.td {
        		flex: 1;
        		border-bottom: 1px #EAEAEA solid;
        		height: 60px;
            line-height: 60px;
        		overflow: hidden; font-size: 14px;
        	}
        }

        .powerlist{ display: flex; text-align: center; padding: 0 20px;
        	line-height: 60px; }
        .powerth{ flex: 1;
        		background: rgb(246, 246, 246);
            color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;}

        .powertd{flex: 1;
        		border-bottom: 1px #EAEAEA solid;
        		height: 60px;
            line-height: 60px;
        		overflow: hidden; font-size: 14px;}
        .fenye{ text-align: right; margin: 20px 0;}
	}
</style>
